<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" session="false" %>
<%
	String path = request.getContextPath();
	pageContext.setAttribute("path", path);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home</title>
<!-- ExtJS 样式 -->
<link rel="stylesheet" type="text/css" href="${path}/script/extjs-3.2.1/resources/css/ext-all.css" />
<!-- 先引入底层驱动，一般用ext自己的，如果要使用jquery的，还要先引入jquery库 -->
<script type="text/javascript" src="${path}/script/extjs-3.2.1/adapter/ext/ext-base.js"></script>
<!-- ExtJs all -->
<script type="text/javascript" src="${path}/script/extjs-3.2.1/ext-all.js"></script>
</head>
<body>
<div id="p"></div>
<script type="text/javascript">
Ext.onReady(function(){
	// 1.Ext.Panel是window等等的父类

	// 2.Ext.Panel组成：顶部工具栏tbar、底部工具栏bbar、面板头部header、面板尾部bottom、面板主区域body
	// button的handler等同于listener:{click:...}
	var btn = new Ext.Button({text:"按钮1"});
	var panel = new Ext.Panel({
		width: 600,
		height: 400,
		// "-" 分割线
		tbar: [{text: "添加", handler: function(){
			panel.add({id: "panel1", title: "面板2"});
			panel.doLayout();
		}}, {text: "删除", handler: function(){
			// panel.remove("panel1");
			// 到上一级去寻找父方法 Container
			// 还有find方法
			var p1 = panel.getComponent(2); // 容器中元素的索引
			panel.remove(p1);
			panel.doLayout();
		}},{text: "更新", handler: function(){
			// panel.load("abc.html");
			// ajax
			// panel.getUpdater().update("abc.html");
			// Element.update()
			panel.body.update("<h1>动态更新内容</h1>");
		}}, {text: "保存"}, "-", {text: "关闭"}],
		bbar: [{text: "上一页"}, {text: "下一页"}],
		buttons: [{text: "确定"}, {text: "取消"}],
		buttonAlign: "center",
		// header的
		title: "面板",
		collapsible: true,
		tools: [{id: "save"}, {id: "print", handler:function(){window.print()}}], // 必须有个id
		// body的
		// html: "<h1>这是面板body区域</h1>"
		// autoLoad: "abc.html"
		// xtype描述的元素，默认的是panel
		items: [btn, {xtype: "button", text: "按钮2"}, {title: "面板1", height: 200}]
	});
	// 渲染的参数可以是一个代表ID的字符串或者是一个DOM节点或者是一个Ext.get的Elemnet元素
	panel.render("p");
	// panel.render(document.getElementById("p"));
	// panel.render(document.body);



});
</script>
<div id="hello"></div>
</body>
</html>
